<template>
  <div>
    <Alert type="warning" v-if="list.length > 0">展厅引用了以下未发布展厅，若要{{okText}}需要先解除关联关系</Alert>
    <List border :loading="isLoading" v-if="list.length > 0">
      <ListItem v-for="(item, index) in list" :key="item.id" v-if="isShowRow(index)">
        <ListItemMeta>
          <div slot="title">#{{index+1}} {{item.title}}</div>
          <div slot="description">
            <div>
              <KeyValueView title="展厅状态" :value="getShowroomState(item.state)"></KeyValueView>
              <KeyValueView title="固定网址" :value="item.shortLink"></KeyValueView>
            </div>
            <div style="margin-top: 5px;">
              <Tag color="volcano">{{getShowroomType(item.type)}}</Tag>
              <Tag color="blue">{{getShowroomPlatform(item.platform)}}</Tag>
            </div>
          </div>
        </ListItemMeta>
        <template slot="action">
          <li>
            <a ghost size="small" href="javascript: void(0);" @click="removeChild(item)">解除</a>
          </li>
        </template>
      </ListItem>
      <ListItem v-if="list.length > maxLines">
        <ListItemMeta></ListItemMeta>
        <template slot="action">
          <li>
            <a @click="collapseRows()" v-if="showAll">收起<Icon type="ios-arrow-up"></Icon></a>
            <a @click="expandRows()" v-else>(共{{list.length}}条) 展开<Icon type="ios-arrow-down"></Icon></a>
          </li>
        </template>
      </ListItem>
    </List>
    <List v-else>
      <ListItem>
        <div style="width: 100%; text-align: center; color: #ccc;">无关联展厅</div>
      </ListItem>
    </List>
    <div class="bottom-buttons">
      <Button type="text" @click="cancelClick()">取消</Button>
      <Button type="primary" @click="okClick(true)" v-if="list.length > 0">全部解除并{{okText}}</Button>
      <Button type="primary" @click="okClick(false)" v-else>{{okText}}</Button>
    </div>
  </div>
</template>

<script>
import KeyValueView from "../../widgets/KeyValueView";
import common_data from "../js/stand/common_data";

export default {
  name: "ChildShowroomList",
  components: {KeyValueView},
  props: {
    list: {type: Array, default: function () {return []}},
    okText: {type: String, default: "发布"},
    showroomId: {type: String, required: true},
    currentTime: {type: Number, default: new Date().getTime()},
  },
  data() {
    return {
      yunPath: this.$store.getters.imgPrefix,
      isLoading: false,
      showAll: false,
      maxLines: 5,
    }
  },
  watch: {
    currentTime() {
      this.queryChildShowroomList();
    },
  },
  methods: {
    queryChildShowroomList() {
      let params = {id: this.showroomId, state: common_data.standsDic.unPublishedState};
      this.isLoading = true;
      this.$apiStand.queryChildShowroomList(params).then(response => {
        this.isLoading = false;
        this.list.splice(0);
        if(response.success) {
          if(response.result!=null && response.result.length > 0) {
            this.list.push(...response.result);
          }
        }else{
          this.$Message.error(response.errorMessage);
        }
      })
    },
    cancelClick() {
      this.$emit("cancelClick");
    },
    okClick(needRemoveChildren) {
      let opTxt = needRemoveChildren ? "解除展厅关联将删除此展厅的相关展位，确定要继续解除所有关联并"+this.okText+"吗？" : "确定要将此展厅"+this.okText+"吗？";
      let self = this;
      this.$Modal.confirm({
        title: "确认",
        content: opTxt,
        okText: "确定",
        cancelText: "取消",
        onOk() {
          if(needRemoveChildren) {
            self.$Spin.show();
            let params = {id: self.showroomId, state: common_data.standsDic.unPublishedState};
            this.$apiStand.removeChildShowrooms(params).then(response => {
              self.$Spin.hide();
              if(response.success) {
                self.$emit("okClick");
              }else{
                self.$Message.error(response.errorMessage);
              }
            })
          }else{
            self.$emit("okClick");
          }
        }
      });
    },
    isShowRow(index) {
      return index < this.maxLines || this.showAll;
    },
    collapseRows() {
      this.showAll = false;
    },
    expandRows() {
      this.showAll = true;
    },
    getShowroomState(state) {
      let element = common_data.standsDic.states.find(element => element.value == state);
      return element?element.label:"";
    },
    getShowroomType(type) {
      let element = common_data.standsDic.types.find(element => element.value == type);
      return element?element.label:"";
    },
    getShowroomPlatform(platform) {
      let element = common_data.standsDic.platforms.find(element => element.value == platform);
      return element?element.label:"";
    },
    removeChild(item) {
      let self = this;
      this.$Modal.confirm({
        title: "确认",
        content: "解除展厅关联将删除引用此展厅的展位，确定要解除该展厅关联吗？",
        okText: "确定",
        cancelText: "取消",
        onOk() {
          self.$Spin.show();
          let params = {id: self.showroomId, state: common_data.standsDic.unPublishedState, childIds: [item.id]};
          this.$apiStand.removeChildShowrooms(params).then(response => {
            self.$Spin.hide();
            if(response.success) {
              self.queryChildShowroomList();
            }else{
              self.$Message.error(response.errorMessage);
            }
          })
        }
      });
    },
  }
}
</script>

<style scoped lang="less">
.bottom-buttons {
  margin-top: 20px;
  text-align: right;
  button {
    margin-left: 5px;
  }
}
</style>
